@()(implicit request: RequestHeader,messages: Messages)
	@main(messages("securitySettings"))("userProfile","securitySet") {

		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/tableFilter.css")">

		<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/filter-control/my-bootstrap-table-filter-control.js")" type="text/javascript"></script>

		<style>
				.genome-pre {
					white-space: pre-wrap;
					word-wrap: break-word;
					border: 0px solid #ccc;
					background-color: white;
				}

				select:not([multiple]) {
					-webkit-appearance: none;
					-moz-appearance: none;
					background-position: right 50%;
					background-repeat: no-repeat;
					background-image: url();
					padding: .5em;
					padding-right: 1.5em
				}

				.fr {
					float: right;
				}

				.base-info .item .title span {
					display: inline-block;
					border-left: 2px solid #0b8af4;
					font-size: 14px;
					color: #333;
					padding-left: 10px;
				}

				.photo span {
					display: block;
					width: 92px;
					height: 92px;
				}

				.photo img {
					width: 100%;
					height: 100%;
				}

				tr > td {
					padding-top: 10px !important;
					padding-bottom: 10px !important;
				}

		</style>
		<div class="page-content">

			<div class="row">
				<div class="col-md-12">
					<div class="portlet light profile-sidebar-portlet ">

						<div class="portlet-title">
							<div class="item">
								<div class="title clear">
									<span>@messages("securitySettings")</span>
								</div>
							</div>
							<div class="caption">
							</div>
						</div>

						<div class="portlet-body">
							<div class="tab-content">
								<div class="tab-pane active" id="tab_1_1">

									<form action="#">
										<table class="table table-light table-hover">
											<tbody>

												<tr>
													<td>
														<i class="fa fa-lock"></i> @messages("AccountPassword")
													</td>
													<td>
														@messages("AccountPasswordInfo")
													</td>
													<td>
														<a href="@routes.UserController.passwordChangeBefore">
															<i class="fa fa-edit"></i>
															@messages("modify")
														</a>
													</td>
												</tr>

												<tr>
													<td>
														<i class="fa fa-mobile"></i> @messages("connectWithPhoneNumber")
													</td>
													<td>
														@messages("cellPhoneBound")<span id="phone"></span>[@messages("cellPhoneBoundInfo")]
													</td>
													<td>
														<a href="@routes.UserController.phoneChangeBefore">
															<i class="fa fa-edit"></i>
															@messages("modify")
														</a>
													</td>
												</tr>

												<tr>
													<td>
														<i class="fa fa-envelope"></i> @messages("emailBound")
													</td>
													<td>
														@messages("emailBound")<span id="email"></span>[@messages("emailBoundInfo")]
													</td>
													<td>
														<a href="@routes.UserController.emailChangeBefore">
															<i class="fa fa-edit"></i>
															@messages("modify")
														</a>
													</td>
												</tr>


											</tbody>
										</table>

									</form>

								</div>

							</div>
						</div>

					</div>
				</div>
			</div>
		</div>


		<script>

				var id = "@request.session.get("id")"

				$(function () {
					SecuritySet.init


				})
		</script>


	}
